<template>
	<view class="qq-navbar">
		<u-navbar :title="title" :back-icon-color="'#fff'" :is-back="false"  :title-width="0" title="" :background="{'background-color':(bgColor?bgColor:'#DB0000')}" :border-bottom="false">
			<!-- #ifndef MP-WEIXIN -->
			<view class="slot-wrap text-white u-flex" >
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="slot-wrap text-white u-flex" :style="{top:top+'px',position:'fixed'}">
			<!-- #endif -->
				<view class=" u-flex-2" >
					<view  class="round drag-left u-flex"  v-if="isBack">
						<view class="u-flex-1" @click="goBack"><u-icon name="arrow-left" size="32"></u-icon></view>
						<view class="u-flex-1" @click="goHome"><u-icon name="home-fill" size="32"></u-icon></view> 
					</view>
				</view>
				<view class="u-flex-5 u-line-1 u-text-center font-size-36">{{title}}</view>
				<view class=" u-flex-2" ></view> 
			</view> 
			
		</u-navbar>
	</view>
</template>
<script>
export default {
	props:{
		isBack:{
			type:Boolean,
			default:true,
		},
		title:{
			type:String,
			default:""
		},
		bgColor:{
			type:String,
			defalult:"#DB0000"
		}
	},
	data() {
		return { 
			options:{},
			top:20,
		 
		}
	}, 
	created(){
		//#ifdef MP-WEIXIN
		var menuButton = uni.getMenuButtonBoundingClientRect();
		let statusHeight=uni.getSystemInfoSync().statusBarHeight;
		console.log(menuButton);
		console.log(statusHeight);
		this.top=(menuButton.top+statusHeight)+'px';  
		//#endif 
	},
	methods:{
		goBack(){
			if(getCurrentPages().length==1){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}else{
				uni.navigateBack({
					 
				})
			}
			
			
		},
		goHome(){
			uni.switchTab({
				url:"/pages/index/index"
			})
		}
	},
	watch:{},
	computed:{},
	destroyed(){}
}
</script>

<style lang="scss">
.qq-navbar{ 
	.slot-wrap {
		width: 100%;
		padding:0upx 20upx;  
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}
	.drag-left{
		background-color: rgba(#ffffff, 0.3);
		text-align: center;
		padding:12upx 0upx;
		.u-flex-1:first-child{
			border-right: 1upx solid #fff;
		}
	} 
}
</style>
